<template>
  <div id="data-view">
    <div class="main-header">
      <div class="title-container">{{i18[lang].title}}</div>
    </div>
    <div class="main-container">
      <div class="m-top-container">
        <div class="table-wrapper">
          <ScrollBoard :config="tbConfig" class="tb-gas" />
        </div>
        <div class="chart-wrapper">
          <el-row class="chart-row" :gutter="10">
            <el-col :span="8" class="custom-loading">
              <BorderBox12>
                <GasBar :chart-data="chart.data" :option="chart.option" style="height: 100%;" v-if="!chartLoading"></GasBar>
                <loading v-if="chartLoading">加载中...</loading>
              </BorderBox12>
            </el-col>
            <el-col :span="8" class="custom-loading">
              <BorderBox12>
                <GasBar :chart-data="chart.data" :option="chart.option" style="height: 100%;" v-if="!chartLoading"></GasBar>
                <loading v-if="chartLoading">加载中...</loading>
              </BorderBox12>
            </el-col>
            <el-col :span="8" class="custom-loading">
              <BorderBox12>
                <GasBar :chart-data="chart.data" :option="chart.option" style="height: 100%;" v-if="!chartLoading"></GasBar>
                <loading v-if="chartLoading">加载中...</loading>
              </BorderBox12>
            </el-col>
          </el-row>
          <el-row class="chart-row" :gutter="10">
            <el-col :span="8" class="custom-loading">
              <BorderBox12>
                <GasBar :chart-data="chart.data" :option="chart.option" style="height: 100%;" v-if="!chartLoading"></GasBar>
                <loading v-if="chartLoading">加载中...</loading>
              </BorderBox12>
            </el-col>
            <el-col :span="8" class="custom-loading">
              <BorderBox12>
                <GasBar :chart-data="chart.data" :option="chart.option" style="height: 100%;" v-if="!chartLoading"></GasBar>
                <loading v-if="chartLoading">加载中...</loading>
              </BorderBox12>
            </el-col>
            <el-col :span="8" class="custom-loading">
              <BorderBox12>
                <GasBar :chart-data="chart.data" :option="chart.option" style="height: 100%;" v-if="!chartLoading"></GasBar>
                <loading v-if="chartLoading">加载中...</loading>
              </BorderBox12>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="m-bot-container">
        <div class="legend-area">
          <div v-for="(color, index) in boilerColors"  class="legend-item" :key="index">
            <div class="legend-color" :style="{backgroundColor: color[0]}"></div>
            <div class="legend-name">{{index + 1}}#炉</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!--检测因子 1号炉浓度  炉排炉2号炉 炉排炉3号炉 国标(mg/m3) 欧标(mg/m3)-->
<script lang="ts" setup>
  import { reactive, ref, watch,onMounted } from "vue"
  import { getTempDataApi, getEmissionDataApi } from "./index"
  import dayjs from "dayjs";
  import GasBar from "@/components/chart/GasBar.vue";
  import { BorderBox12, ScrollBoard, Loading } from '@kjgl77/datav-vue3';

  const mainColor = '#47C5E6'
  const boilerColors = [["#409EFF", "#09467A"], ["#91CC75", "#0B4170"], ["#FAC858", "#1A3B68"]]
  const tableLoading = ref<boolean>(true)
  const chartLoading = ref<boolean>(true)
  const lang = ref('ch')
  const i18 = <any>reactive({
    'ch':{
      title:'烟气数据实时监测（Flue Gas Data Monitoring）'
    },
    'en':{

    }
  })

  //#region 查
  const tableConstants = [
    ['名称（Name）', '单位（Unit）', '1#炉（Boiler 1）','2#炉（Boiler 2）','3#炉（Boiler 3）','国家标准（National Standard）','欧盟标准（EU Standard）','监测日期（Monitoring Date）']
  ]
  const cols = ['炉温 Boiler Temperature （BT）','粉尘 Particulate Matter (PM)','氮氧化物 Nitrogen Oxides (NOx)','二氧化硫 Sulfur Dioxide (SO₂)','氯化氢 Hydrogen Chloride (HCl)','一氧化碳 Carbon Monoxide (CO)']
  const tableData = ref<any>([])
  const chart = reactive({
    data:[],
    option:{}
  })
  const tbConfig = reactive({
    header:[],
    data:[],
    headerBGC: "#051044",
    oddRowBGC: "#02377E",
    evenRowBGC: "#093362",
    rowNum: 5
  })

  const getTableData = () => {
    tableLoading.value = true
    getEmissionDataApi({})
      .then((res) => {
        let tbData = [...tableConstants]
        if (res&&res.length){
          for (let i in res){
            const items = res[i]
            const firstItem = cols[i]
            if(i==0){
              tbData.push([firstItem, "℃", ...items, dayjs().format('YYYY-MM-DD')])
            }
            else{
              tbData.push([firstItem, "mg/m³", ...items, dayjs().format('YYYY-MM-DD')])
            }
          }
        }
        tableData.value = tbData
        tbConfig.header = tbData[0]
        tbConfig.data = tbData.slice(1)
        //tbConfig.rowNum = tbConfig.data.length
        console.log(tbData)
      })
      .catch(() => {
        tableData.value = []
      })
      .finally(() => {
        tableLoading.value = false
      })
  }

  const setChartData = () => {
    
  }

  const getChartData = () => {
    chartLoading.value = true
    setTimeout(()=>{

      let dataArr = []
      const xValues = ["1#炉", "2#炉", "3#炉"]
      const yValues =  [15.6, 25.3, 21.8]
      for (const i in xValues){
        let itemStyle;
        if(i == 0){
          itemStyle = { 
            //barBorderRadius: [10, 10, 0, 0], // [左上, 右上, 右下, 左下]
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: boilerColors[0][0] }, // 顶部颜色
                { offset: 1, color: boilerColors[0][1] }  // 底部颜色
              ]
            }
          }
        }
        else if(i == 1){
          itemStyle = { 
            //barBorderRadius: [10, 10, 0, 0], // [左上, 右上, 右下, 左下]
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: boilerColors[1][0] }, // 顶部颜色
                { offset: 1, color: boilerColors[1][1] }  // 底部颜色
              ]
            }
          }
        }
        else if(i == 2){
          itemStyle = { 
            //barBorderRadius: [10, 10, 0, 0], // [左上, 右上, 右下, 左下]
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: boilerColors[2][0] }, // 顶部颜色
                { offset: 1, color: boilerColors[2][1] }  // 底部颜色
              ]
            }
          }
        }

        const xVal = xValues[i]
        const data = {
          type:'粉尘',
          name: xVal,
          value: {
            value: yValues[i],
            itemStyle: itemStyle
          }
        }
        
        dataArr.push(data)
      }
      
      chart.data = dataArr
      chart.option = {
        xAxis: {
          axisLine:{
            show:true,
            lineStyle:{
              color:mainColor
            }
          },
          axisLabel:{
            color:mainColor
          },
        },
        yAxis: {
          type: 'value',
          name:'粉尘 Particulate Matter (PM)',
          axisLine:{
            show:true,
            lineStyle:{
              color:mainColor
            }
          },
          axisLabel:{
            color:mainColor
          },
          splitLine:{
            show:false,
            lineStyle:{
              color:'rgba(175,175,175,0.8)',
              type:'dashed'
            }
          },
          nameTextStyle:{
            fontSize:12,
            padding:[0,-50,0,0]
          }
        }
      }


      chartLoading.value = false
    }, 1000);
  }

  onMounted(()=>{
    getTableData()
    getChartData()
  })

</script>


<style lang="scss" scoped>
  @mixin backgroundImage($url) {
    background-image: url($url);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  #data-view {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      width: 100%;
      height: 100vh;
      padding:0;
      @include backgroundImage("@/assets/img/bg.png");
      color: #fff;
      overflow: hidden;

      .main-header {
        width: 100%;
        height: 70px;
        display: flex;
        flex-direction: row;
        justify-content:center;
        align-items: flex-end;
        @include backgroundImage("@/assets/img/header_line.png");
        position: relative;
        & .title-container {
          margin-bottom: 20px;
          font-weight: bolder;
          font-size: 28px;
        }
      }
      .main-container {
        position: relative;
        margin: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        height:calc(100vh - 70px);
        padding: 8px;
        .m-top-container{
          height:calc(100% - 70px);
          .table-wrapper {
            height:25%;
            .tb-gas{
              width:100%;
              height:calc(100% - 20px);
              margin-bottom: 10px;
              margin-top: 10px;
            }
          }
          .chart-wrapper {
            width:100%;
            height: 75%;
            .chart-row{
              height:calc(50% - 10px);
              margin-bottom: 10px;
            }
          }
        }
        .m-bot-container{
          margin-top: 10px;
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: center;
          width: 100%;
          height: 50px;
          @include backgroundImage("@/assets/img/bot_line.png");
        }
      }
  }
  .m-table{
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    color: green;
    border: 1px dashed #ffffff;
    border-top: none;
  }
  .tb-col{
    text-align: center;
    padding: 10px;
    border-right: 1px dashed #ffffff;
  }
  .firstRow{
    border-top: 1px dashed #ffffff;
  }

  
  /* 去掉背景色 */
  .custom-loading{
    height: 100%;
    .el-loading-mask {
      background-color: transparent !important;
    }
  }
  .legend-area{
    display: flex;
    justify-content: center;
    align-items: center;
    & .legend-item{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      margin: 0px 10px;
      & .legend-color{
        display: inline-block;
        width: 40px;
        height: 20px;
        margin: 1px 10px;
      }
      & .legend-name{
        display: inline-block;
        color: white;
      }
    }
  }
</style>
